body.menu-on{height: 100vh;overflow: hidden}
.pagination span{width: auto;}
.pagination .pager li{width: 30px;height: 30px;}
.btn{width: 130px;height: 45px;line-height: 45px;}

#header{position:relative;transition: 0.5s;z-index: 99999999;}
#header .menu-btn{display:flex;align-items:center;justify-content:center;width:70px;height:70px;position:absolute;right:0}
#header .menu-btn span,#header .menu-btn::after,#header .menu-btn::before{content:'';position:absolute;width:30px;height:2px;background:#666;}
#header .menu-btn::before{top:23px}
#header .menu-btn::after{bottom:23px}
#header .menu-wrap .menu{background:#fff;position:fixed;right:-70%;top:0;padding:0;width:70%;margin:0;}
#header .menu-wrap .menu ul li{width:100%!important;padding:0 0 0 20px;box-sizing:border-box;line-height: 50px;margin: 0 !important;}
#header .menu-wrap .menu ul li img{display: none !important;}
#header .menu-wrap .menu ul li a{padding: 0 !important;height: 50px !important;line-height: 50px !important;width: 100%;margin-bottom:0 !important;}
#header .menu-wrap .menu ul li .dropdown{display: block;right: 0;top: 0;margin: 0;width: 50px;}
#header .menu-wrap .menu ul li .dropdown::before{content:"";width:7px;height:7px;position:absolute;right:40%;top:50%;box-sizing:border-box;border-width:1px 0 0 1px;border-style:solid;border-color:initial;-webkit-transform:rotate(135deg) translate(0,-50%);transform:rotate(135deg) translate(0,-50%);-webkit-transform-origin:top;transform-origin:top;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
#header .menu-wrap .menu ul li.on > a .dropdown::before{-webkit-transform:rotate(225deg) translate(0,-50%);transform:rotate(225deg) translate(0,-50%);}
#header .menu-wrap .menu .first{height: 100vh;overflow-y: scroll}
#header .menu-wrap .menu .first>li{border-bottom:1px solid #eee;height:initial;padding: 0 10px 0 20px}
#header .menu-wrap .menu .first>li a{color:#333}
#header .menu-wrap .menu .first>li>a::after{display:none}
#header .menu-wrap .menu .first>li a:hover::after{display:none}
#header .menu-wrap .menu .second{width:100% !important;box-sizing:border-box;position:initial !important;;margin:0 !important;;padding:0 !important;}
#header .menu-wrap .menu .sub-box{position: initial;background: #fff;box-sizing: border-box;}
#header .menu-wrap .menu .sub-box ul li a{color: #333;text-align: left;padding-left: 2em !important;}
#header .menu-wrap .menu .second > li:hover a{background: #ededff;}
#header.menu-on{-webkit-transform: translateX(-70%);-ms-transform: translateX(-70%);transform: translateX(-70%);}
#header.menu-on .menu-btn:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:33px;left:20px}
#header.menu-on .menu-btn:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:33px;left:20px}
#header.menu-on .menu-btn span{display: none}
#header.menu-on .menu-head{box-shadow:-1px 0 5px 0 rgba(0,0,0,.2);}

#footer .con{padding-top: 60px;padding-bottom: 20px}
#footer .con .txt{font-size: 2rem;line-height: 1.5}
#footer .con .btn{margin: 10px auto;}
#footer .con .copyright{line-height: 1.5;padding-top: 20px;}
#footer .friend_link{line-height: 1.5;padding: 10px 0;}
#footer .friend_link a{display: inline-block;}

#foot-message{height: auto}
#foot-message.hide{height: 130px;}
#foot-message .container{padding: 30px 5% 0}
#foot-message .form{flex-direction: column;}
#foot-message .form ul{flex-direction: column;}
#foot-message .form ul li{width: 100%;padding: 0;margin-bottom: 10px;}
#foot-message .form ul li .input{height: 40px;line-height: 40px;}
#foot-message .form .btn{width: 100%;height: 40px;line-height: 40px;}
#foot-message .con .txt{flex-direction: column;align-items: flex-start;}
#foot-message .con .txt > span{font-size: 1.6rem;}

#main{padding-top: 0;}
#main .x-title{font-size: 2rem;line-height: 1.5;}
#main .top-banner{height: 350px;}
#main .top-banner .txt{font-size: 2rem;}
#main .top-banner .btn{margin-top: 30px;}

#index.index .banner{height: 200px;}
#index.index .banner img{height: 100%}
#index.index .banner .swiper-pagination span{width: 12px;height: 12px;}
#index.index .sys .title-wrap{padding: 40px 0 10px;}
#index.index .sys .title-wrap .img{padding: 0 0 12px;}
#index.index .sys .list{padding-top: 20px;}
#index.index .sys .list .box{width: 100%;}
#index.index .sys .list .box .title{height: auto;padding: 10px 0;}
#index.index .sys .list .box .title p:nth-of-type(1){padding: 0 0 5px;}
#index.index .sys .list .box .con .item .txt p:nth-of-type(1){padding-bottom: 10px;}
#index.index .why{margin-top: 0;}
#index.index .why .list .item:not(:last-child){margin-right: 0;}
#index.index .pain-point .swiper{padding-bottom: 50px}
#index.index .pain-point .swiper .swiper-slide{padding: 20px;}
#index.index .pain-point .swiper .swiper-slide > img{height: 30px;}
#index.index .pain-point .swiper .swiper-slide .title{font-size: 1.6rem;margin-top: 10px;line-height: 35px;}
#index.index .pain-point .swiper .swiper-slide .desc{font-size: 1.4rem;margin-top: 0;}
#index.index .pain-point .swiper .swiper-pagination{bottom: 10px;}
#index.index .news .x-title{margin-top: 40px;}
#index.index .news .tab-nav{padding: 30px 0;flex-wrap: wrap;justify-content: space-between;}
#index.index .news .tab-nav span{width: 45%;margin: 0 0 15px !important;}
#index.index .news .tab-content .box a{width: 100%;margin-bottom: 20px;}
#index.index .news .tab-content .box a .time{width: 90px;height: 45px;line-height: 45px;background-size: contain;padding-left: 5px;}
#index.index .news .tab-content .box a .txt p:nth-of-type(1){font-size: 1.3rem;margin-bottom: 4px;}
#index.index .company{padding-top: 40px;padding-bottom: 50px;}
#index.index .company .list .item{width: 45%;}

#product .tab-nav{flex-wrap: wrap;height: auto;}
#product .tab-nav a{margin: 0 0 10px !important;width: 45%;text-align: center;padding-bottom: 10px;}
#product .tab-nav a.on::after{bottom: 0;}
#product .content{padding-bottom: 50px;}
#product .content .box{flex-direction: column-reverse !important;padding-top: 60px;}
#product .content .box .con{width: 100%;}
#product .content .box .con .title{font-size: 2rem;text-align: center;display: block;}
#product .content .box .con .title span{font-size: 1.5rem}
#product .content .box .con .txt{font-size: 1.4rem;}
#product .content .box .con .txt p{margin: 0 0 10px;}
#product .content .box img{width: 80%}
#price .top-banner .price-wrap{flex-direction: column;padding: 20px;width: 90%;}
#price .top-banner .price-wrap .txt p:nth-of-type(1){font-size: 2rem;margin-bottom: 10px;line-height: 1;}
#price .top-banner .price-wrap .txt p:nth-of-type(2){margin: 0;font-size: 1.5rem;}
#price .top-banner .price-wrap .box{width: 100%;justify-content: space-between;padding-top: 20px;align-items: flex-end}
#price .top-banner .price-wrap .box .price span:nth-of-type(1){font-size: 3rem;line-height: 1.2;}
#price .top-banner .price-wrap .box .price span:nth-of-type(2){font-size: 1.5rem;}
#price .top-banner .price-wrap .box .btn{height: 35px;line-height: 35px;width: 100px;}
#price .content{margin-top: 125px;width: 90%;padding: 20px;margin-bottom: 70px;}
#price .content table{margin-top: 20px;}
#price .content table th{font-size: 1.3rem;height: 40px;}
#price .content table td{font-size: 1.2rem;padding: 10px 5px;}

#case .top-banner .txt p:nth-of-type(2){width: 100%;margin-top: 20px;font-size: 1.5rem;}

#case.dx .x-title{font-size: 2rem;}
#case.dx .x-title-sub{font-size: 1.8rem;margin-top: 10px;}
#case.dx .box{margin-top: 50px;}
#case.dx .difficulty .x-title{padding-bottom: 20px;}
#case.dx .difficulty .con{flex-direction: column;}
#case.dx .difficulty .con .item{width: 100%;margin-bottom: 50px;}
#case.dx .difficulty .con .item img{max-width: 25%;}
#case.dx .difficulty .con .item .title{font-size: 1.8rem;margin-top: 15px;}
#case.dx .difficulty .con .item .desc{margin-top: 5px;font-size: 1.5rem;line-height: 20px;}
#case.dx .solution .item{flex-direction: column;margin-bottom:80px !important;}
#case.dx .solution .item .txt{width: 100%;}
#case.dx .solution .item .txt + img{width: 100%;}
#case.dx .solution .item .txt .title{font-size: 2rem;}
#case.dx .solution .item .txt .sub-title{font-size: 1.5rem;padding: 20px 0 0;}
#case.dx .solution .item .txt .desc{font-size: 1.4rem;line-height: 1.5}
#case.dx .solution .item.arrow{display: none;}
#case.dx .solution .item:nth-of-type(4){flex-direction: column;}
#case.dx .solution .item:last-of-type{display: none;}
#case.dx .advantage .con{padding: 20px 0 40px;flex-direction: column;}
#case.dx .advantage .con img{width: 100%;}

#case.work-wechat .x-title{padding: 60px 0 30px;}
#case.work-wechat .box.customer .con{flex-wrap: wrap;}
#case.work-wechat .box.customer .con .item{width: calc(50% - 20px);margin-bottom: 40px;}
#case.work-wechat .box.customer .con .item .title{font-size: 1.5rem;padding-bottom: 10px}
#case.work-wechat .box.arrow .btn{height: 40px;line-height: 40px;font-size: 1.5rem;}
#case.work-wechat .box.transform .con .r{display: none}
#case.work-wechat .box.transform .con .l .item{flex-direction: column;}
#case.work-wechat .box.transform .con .l .item .txt{width: 100%;padding-bottom: 15px;}
#case.work-wechat .box.transform .con .l .item .txt .title{font-size: 1.5rem;margin-bottom: 5px;}
#case.work-wechat .box.transform .con .l .item .txt .desc{font-size: 1.3rem}
#case.work-wechat .box.transform .con .l .item img{width: 90%;}
#case.work-wechat .box.fission .con {flex-direction: column;}
#case.work-wechat .box.fission .con .item{width: 100%;margin-bottom: 50px;}
#case.work-wechat .box.fission .con .item .title{margin-bottom: 20px;font-size: 1.5rem;}
#case.work-wechat .x-title{padding: 30px 0 10px;}

#case.vocational .x-title{padding-top: 50px;}
#case.vocational .x-title-sub{font-size: 1.5rem;padding-top: 10px;margin-bottom: 20px;}
#case.vocational .box{flex-direction: column-reverse !important;padding-top: 50px;}
#case.vocational .box img{width: 90%;}
#case.vocational .box .con{width: 100%;}
#case.vocational .box .con .title{font-size: 2rem;}
#case.vocational .box .con .title-sub{font-size: 1.5rem;margin: 10px 0;}
#case.vocational .box .con .txt{font-size: 1.4rem;line-height: 1.5;padding-bottom: 20px;}
#case.vocational .box.customer{flex-direction: column !important;}
#case.vocational .box.customer .x-title{padding-bottom: 40px;}
#case.vocational .box.customer .item{width: 45%;}

#case.common .x-title{padding: 50px 0 0}
#case.common .box .con{flex-direction: column !important;}
#case.common .box .con img{width: 90%;}
#case.common .box .con .txt{width: 100%;padding-top: 20px;}
#case.common .box .con .txt .title{font-size: 1.5rem;}
#case.common .box .con .txt .desc{font-size: 1.3rem;margin-bottom: 15px;}
#case.common .box .list{margin-bottom: 50px;}
#case.common .box .list .item{width: 45%;}

#news.index .top-banner{height: 200px;}
#news.index .nav{flex-wrap: wrap;justify-content: space-between;padding: 30px 0;}
#news.index .nav a{width: calc(50% - 10px);margin:0 0 10px 0 !important;}
#news.index .list a{width: 100%;padding: 10px;margin-bottom: 15px;font-size: 1.5rem;}
#news.index .list a .time{font-size: 2rem;padding-right: 15px;}
#news.index .list a .time span:nth-of-type(2){font-size: 1.3rem;}
#news.index .list a .title{padding-left: 10px;}
#news.index .pagination{margin: 20px 0 50px;}
#news.detail .main{margin-bottom: 0}
#news.detail .main .l .title{font-size: 2rem;}
#news.detail .main .l .content{padding-bottom: 0}
#news.detail .main .l .content img{height: auto !important;}

#about.index .main{flex-direction: column;padding-top: 50px;margin-bottom: 60px;}
#about.index .main .l, #about.index .main .r{width: 100%;}
#about.index .main .r{padding-top: 50px;}
#about.index .main .r .my-huke-form-container h3{font-size: 1.8rem;}
#about.index .main .r .my-huke-form-container .form_detail,#about.index .main .r .Form .field_name{font-size: 1.4rem;}